<template>
  <div v-if="schedule">
    <van-nav-bar @click-left="handleBack" style="position:sticky;top:0;z-index:2;">
      <template #left>
        <van-icon name="arrow-left" color="#8A8B8C" size="24" style="position:sticky;top:0;z-index:2;" />
      </template>
      <template #title>
        {{ schedule.cinema.name }}
      </template>
    </van-nav-bar>
    <van-notice-bar
      left-icon="volume-o"
      :text="'温馨提示：' + schedule.noticeMsg"
    />
    <div class="hall">
      {{ schedule.hall.name}}
    </div>
    <ul class="seat-select">
      <li v-for="item in arr" :key="item.id" @click="handleSeat(item)">
        <template v-if="item.check && item.sale == false">
          <img src="@/assets/selected.png" alt="">
        </template>
        <template v-if="!item.check && item.sale == false">
          <img src="@/assets/select.png" alt="" style="width:30px;height:30px;">
        </template>
        <template v-if="item.sale">
          <img src="@/assets/sale.png" alt="">
        </template>
      </li>
    </ul>
    <ul class="seat-status-tips">
      <li>
        <img src="@/assets/sale.png" alt="">
        <p>已售</p>
      </li>
      <li>
        <img src="@/assets/select.png" alt="" style="width:30px;height:30px;">
        <p>可选</p>
      </li>
      <li>
        <img src="@/assets/selected.png" alt="">
        <p>选中</p>
      </li>
    </ul>
    <div class="action-container">
      <div class="input-wrap">
        <div class="cinema-wrap">
          <div class="col-1">
            <p>{{ schedule.film.name }}</p>
            <span @click="handleChange(schedule.scheduleId)">
              切换场次
              <van-icon v-if="flag" name="arrow-down" />
              <van-icon v-else name="arrow-up" />
            </span>
          </div>
          <div class="film-des">{{ schedule.showAt | dateFilter }} {{ schedule.film.language }}{{ schedule.imagery }}</div>
          <!-- 切换场次 -->
          <div v-if="!flag">
            <detail-swiper name="chooseTime" :swiperOptions="swiperOptions">
              <detail-swiper-item
                v-for="(item, index) in fromCinemafilmSchedules" :key="item.scheduleId"
              >
                <div class="choose-time" :class="select == item.scheduleId ? 'choose-active' : ''" :ref="index" @click="handleSelect(item.scheduleId)">
                  <p style="font-size: 14px;color: #191a1b;line-height: 17px;">{{ item.showAt | timeFilter }}</p>
                  <p style="font-size: 10px;color: #bdc0c5;line-height: 14px;">{{ item.filmLanguage }}{{ item.imagery }}</p>
                  <p style="font-size: 13px;color: #797d82;">￥{{ item.salePrice / 100 }}</p>
                </div>
              </detail-swiper-item>
            </detail-swiper>
          </div>
          <!-- 选择座位 -->
          <div v-if="selectArr.length > 0" class="select-seat">
            <span v-for="(item, index) in selectArr" :key="index">
              {{ item.row + 1 }}排{{ item.col }}座
            </span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="selectArr.length > 0" class="buyBtn" @click="goAlipay(selectArr.length * temp[0].salePrice / 100)">{{ selectArr.length * temp[0].salePrice / 100 }}确认选座</div>
    <div v-else class="buyBtn" style="color: #FF8E5A">请先选座</div>
  </div>
</template>

<script>
import http from '@/utils/http'
import obj from '@/utils/mixin'
import Vue from 'vue'
import moment from 'moment'
import detailSwiper from '@/components/detail/DetailSwiper.vue'
import detailSwiperItem from '@/components/detail/DetailSwiperItem.vue'
import { Toast } from 'vant'

moment.locale('zh-cn') // 设置成中文

Vue.filter('dateFilter', (date) => {
  const currentYear = (new Date()).getFullYear()

  // 卖座的时间戳是以秒为单位，要换成毫秒
  let weekday = moment(date * 1000).format('dddd')
  let month = moment(date * 1000).format('MM-DD')
  let year = moment(date * 1000).format('YYYY')

  parseInt(currentYear) < parseInt(year) ? year = year + '年' : year = ''

  weekday = weekday.replace('星期', '周')
  month = month.replace('-', '月') + '日'

  return weekday + year + month + ' ' + moment(date * 1000).format('LT') + ' '
})

Vue.filter('timeFilter', time => moment(time * 1000).format('HH:mm'))

export default {
  mixins: [obj],
  components: {
    detailSwiper,
    detailSwiperItem
  },
  data () {
    return {
      schedule: null,
      flag: true,
      fromCinemafilmSchedules: [],
      temp: [],
      swiperOptions: {
        slidesPerView: 4,
        freeMode: true
      },
      select: 0,
      arr: [
        { id: 1, sale: false },
        { id: 2, sale: false },
        { id: 3, sale: false },
        { id: 4, sale: false },
        { id: 5, sale: false },
        { id: 6, sale: false },
        { id: 7, sale: false },
        { id: 8, sale: false },
        { id: 9, sale: false },
        { id: 10, sale: false },
        { id: 11, sale: false },
        { id: 12, sale: false },
        { id: 13, sale: false },
        { id: 14, sale: false },
        { id: 15, sale: true },
        { id: 16, sale: false },
        { id: 17, sale: true },
        { id: 18, sale: false },
        { id: 19, sale: false },
        { id: 20, sale: false },
        { id: 21, sale: false },
        { id: 22, sale: false },
        { id: 23, sale: false },
        { id: 24, sale: false },
        { id: 25, sale: false },
        { id: 26, sale: false },
        { id: 27, sale: false },
        { id: 28, sale: false },
        { id: 29, sale: false },
        { id: 30, sale: false },
        { id: 31, sale: false },
        { id: 32, sale: false },
        { id: 33, sale: false },
        { id: 34, sale: false },
        { id: 35, sale: false },
        { id: 36, sale: false },
        { id: 37, sale: true },
        { id: 38, sale: true },
        { id: 39, sale: false },
        { id: 40, sale: false },
        { id: 41, sale: false },
        { id: 42, sale: false },
        { id: 43, sale: false },
        { id: 44, sale: false },
        { id: 45, sale: false },
        { id: 46, sale: false },
        { id: 47, sale: false },
        { id: 48, sale: false },
        { id: 49, sale: false },
        { id: 50, sale: false },
        { id: 51, sale: false },
        { id: 52, sale: false },
        { id: 53, sale: false },
        { id: 54, sale: false },
        { id: 55, sale: false },
        { id: 56, sale: false }
      ],
      selectArr: []
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    this.fromCinemafilmSchedules = this.modifyDate(JSON.parse(localStorage.getItem('schedules')))
    // console.log(this.fromCinemafilmSchedules)

    http({
      url: `/gateway/?scheduleId=${this.$route.params.scheduleId}&k=978485`,
      headers: {
        'X-Host': 'mall.film-ticket.schedule.info'
      }
    }).then(response => {
      console.log(response.data.data.schedule, '11111111111111')
      this.schedule = response.data.data.schedule

      const temp = JSON.parse(localStorage.getItem('schedules')).filter(item => item.scheduleId === this.schedule.scheduleId)
      console.log(temp)
      this.select = temp[0].scheduleId
      this.temp = temp
    })
  },
  methods: {
    goAlipay (pay) {
      this.$router.push('/alipay')
      localStorage.setItem('pay', JSON.stringify(pay))
    },
    handleChange (scheduleId) {
      this.flag = !this.flag
      const temp = JSON.parse(localStorage.getItem('schedules')).filter(item => item.scheduleId === scheduleId)
      console.log(temp)
      this.select = temp[0].scheduleId
    },
    handleSelect (scheduleId) {
      console.log(scheduleId)
      http({
        url: `/gateway/?scheduleId=${scheduleId}&k=978485`,
        headers: {
          'X-Host': 'mall.film-ticket.schedule.info'
        }
      }).then(response => {
        console.log(response.data.data.schedule)
        this.schedule = response.data.data.schedule

        const temp = JSON.parse(localStorage.getItem('schedules')).filter(item => item.scheduleId === scheduleId)
        // console.log(temp)
        this.select = temp[0].scheduleId
        this.selectArr = []
        this.arr.forEach(item => { item.check = false })
      })

      const temp = JSON.parse(localStorage.getItem('schedules')).filter(item => item.scheduleId === scheduleId)
      this.temp = temp
    },
    handleBack () {
      this.$router.back()
    },
    modifyDate (arr) {
      console.log(arr)
      if (arr.length > 1) {
        arr.sort((a, b) => {
          return b.showAt > a.showAt ? -1 : 1
        })
      }
      return arr
    },
    handleSeat (item) {
      // console.log(item.id, '座位被点击了')

      if (!item.sale) {
        if (!item.check && this.selectArr.length > 4) {
          Toast('一个用户最多购买5张')
          return false
        } else {
          this.arr.forEach(seat => {
            if (seat.id === item.id && seat.check === true) {
              seat.check = false
              this.selectArr.pop()
            } else {
              if (seat.id === item.id) {
                seat.check = true
              }
            }
          })

          this.arr.push(1)
          this.arr.pop()
          this.selectArr = this.arr.filter(item => item.check === true)
          this.selectArr.forEach(item => {
            item.row = parseInt(item.id / 8)
            item.col = item.id % 8
            if (item.col === 0) {
              item.row--
              item.col = 8
            }
          })
          // console.log(this.selectArr)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.choose-active {
  border: 1px solid #FFAD89;
}

.choose-time {
  background-color: #F8F8F8;
  min-width: 70px;
  // width: 70px;
  height: 60px;
  padding: 6px 0;
  text-align: center;
  border-radius: 2px;
  box-sizing: border-box;
  margin-right: 10px;
}

.seat-select {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 15px 0 25px 15px;

  li {
    height: 45px;
    width: 45px;
  }
}

.seat-status-tips {
  position: fixed;
  bottom: 148px;
  width: 100%;
  background-color: #F4F4F4;
  padding: 10px 30px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;

  > li {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }

    p {
      font-size: 13px;
      color: #797d82;
    }
  }
}

.action-container {
  position: fixed;
  bottom: 49px;
  width: 100%;
  padding: 10px;
  background-color: #F4F4F4;
  box-sizing: border-box;

  .input-wrap {
    padding: 15px 15px 10px;
    background-color: #fff;

    .cinema-wrap {

      .col-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
          color: #191a1b;
          font-size: 15px;
          line-height: 21px;
        }

        span {
          line-height: 20px;
          color: #ff5f16;
          font-size: 13px;
          display: flex;
          align-items: center;
        }
      }

      .film-des {
        font-size: 13px;
        line-height: 19px;
        margin-top: 4px;
        color: #797d82;
        margin-bottom: 10px;
      }

    }
  }
}

.hall {
  color: #fff;
  background: #DBDBDB;
  text-align: center;
  border-radius: 0 0 20px 20px;
  padding: 3px 0;
}

.select-seat {
  display: flex;
  margin-top: 8px;

  span {
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: url("../assets/seat-bg.png") no-repeat;
    border-radius: 0;
    font-size: 14px;
    padding-left: 10px;
  }
}

.buyBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 49px;
  width: 100%;
  text-align: center;
  background-color: #ff5f16;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
  z-index: 1;
}
</style>
